<template>
  <div class="section">
    <video ref="video" :src="videoSrc" muted></video>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const videoSrc = './src/assets/videos/banner1.mp4';
const video = ref(null);

function handleScroll(event) {
  const videoElement = video.value;
  if (!videoElement) return;

  const rect = videoElement.getBoundingClientRect();
  const windowHeight = window.innerHeight;

  if (rect.top <= windowHeight / 2 && rect.bottom >= windowHeight / 2) {
    const progress = Math.max(0, Math.min(1, (windowHeight / 2 - rect.top) / rect.height));
    videoElement.currentTime = progress * videoElement.duration;

    if (event.deltaY > 0 && progress < 1) {
      videoElement.play();
    } else if (event.deltaY < 0 && progress > 0) {
      videoElement.playbackRate = -1; // 倒退播放
      videoElement.play();
    } else {
      videoElement.pause();
    }
  }
}

onMounted(() => {
  window.addEventListener('wheel', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('wheel', handleScroll);
});
</script>

<style scoped>
.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  background-color: black;
}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>